<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>web06</title>
        <meta name="description" content="" />
        <meta name="author" content="Choongang31" />

        <meta name="viewport" content="width=device-width; initial-scale=1.0" />

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
        <link href='http://api.mobilis.co.kr/webfonts/css/?fontface=NanumBrushWeb'
        rel='stylesheet' type='text/css' />
        <link href='http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb'
        rel='stylesheet' type='text/css' />
        <link href='http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicExtraBoldWeb'
        rel='stylesheet' type='text/css' />
        <style>
            body{padding:20px; background-color:#333333;}
            a.banner{display:block;
                 width:728px;  height:176px;
                 border:5px; solid:#555555;
                /*p94 배경그림 3개를 동시에 적용하기 */
               /* left:-200이면 그림이 왼쪽으로 완전히 빠져버려서 보이지 않는다.  */
                background:
                url(7A2BE7EEFEF83F7F.jpg) no-repeat -800px 20px,
                url(82FEC52F81C39AC7.jpg) no-repeat 20px 900px,
                url(B3966D9A6377C91B.jpg) no-repeat -80px -800px;
            /*시간:background-position 에만 시간을 적용  */
           /*0.6초 동안 변화,변화 가속도, 대기시간  */
            -moz-transition:background-position  .6s ease-in  .2s;    /* 0.6초뒤에 0.2초동안 천천히해라. */
            -webkit-transition:background-position  .6s ease-in  .2s;
            -ms-transition:background-position  .6s ease-in  .2s;
            -khtml-transition:background-position  .6s ease-in  .2s;
            -o-transition:background-position  .6s ease-in  .2s;      
           
            position:relative; 
            /*하위의 로고가 그림을  기준으로 위치를 잡도록 해준다.  */
            }
            /*p96 position  */
            a.banner .banner-logo{
              position:absolute; top:20px; left:270px;  
              transition-property: left;
              transition-duration:.1.0s;
              transition-timing-function:cubic-bezeier;
              transition-delay:.3s;
              
              -moz-transition:left 1.0s cubic-bezeier 3s;
              -webkit-transition:left 1.0s cubic-bezeier 3s;
              -ms-transition:left 1.0s cubic-bezeier 3s;
              -khtml-transition:left 1.0s cubic-bezeier 3s;
              -o-transition:left 1.0s cubic-bezeier 3s;
              
              
              
            }
            a.banner .banner-desc{
                font:italic 39px/0.9"NanumPenWeb","나눔 손글씨 펜","Nanum Pen Script";
                /* 속기형, short cut  */
               /* 글꼴을 반드시 지정해야 합니다. */
              /*39px/0.9 에서 39px는 글자크기 0.9는 행간  */
             position:absolute;
              top:35px; left:170px;
              color:#FF0000;
              opacity:0;
            }
            a.banner:hover .banner-desc,
            a.banner:focus .banner-desc{
                 opacity:1;
            }
            a.banner:hover .banner-logo,
            a.banner:focus .banner-logo{
                left:440px;
            }
           div{font-family: 'NanumBrushWeb';
               font-size:2em;
               color:#FFFF00;
           }
           p{font-family: 'NanumGothicExtraBoldWeb';
              font-size:2em;
              color:#EEFFFF;
              }
           a.banner:hover, a.banner:focus{
               background-position: 
               110px 20px,
               340px 60px,
               -130px -90px;
           }
          
        </style>
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="banneraudio.js">
    
        (function($){
            $(function(){
                $('.banner').banner_sound('media/small.webm');
            });
        })(jQuery);
    </script>
    </head>
       
    <body>
        <br><br><br><br><br><br><br><br><br>
      <a class="banner" href="web05.html">
          <p class="banner-logo">웹표준 <br>
               CSS3
          <strong class="banner-desc">
              w3schools.com</strong>    
          </p>
          5일차 배운내용 p89
      </a>
      <div> 웹폰트 사용하기 </div>
 <!--   
<video controls>

<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>

<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>

<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>

<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>

</video>
-->
    </body>
</html>
